<template>
    <div class="grid grid-cols-3 grid-rows-2 gap-2 px-3 text-xs text-gray-700">
        <RouterLink :to="{
            name: 'circle-category',
            params: { id: 1 }
        }" class=" h-32 pt-2 row-span-2 bg-[#fef7ed] rounded-lg flex flex-col text-center">
            <div class="text-sm font-bold shrink-0">
                学习喵
            </div>
            <div class="text-gray-500 shrink-0">
                18 圈子
            </div>
            <div class="py-2 mt-2 bg-center bg-no-repeat bg-contain grow" :style="`background-image:url(${cat1})`"></div>
        </RouterLink>
        <RouterLink :to="{
            name: 'circle-category',
            params: { id: 1 }
        }" class=" px-2 bg-[#fef7ed] rounded-lg inline-flex items-center" v-for="(item, index) in [cat2, cat3, cat4]">
            <div class="shrink-0">
                <div class="text-sm font-bold shrink-0">
                    学习喵
                </div>
                <div class="text-gray-500 shrink-0">
                    18 圈子
                </div>
            </div>
            <div class="h-full pt-2 pl-2 grow">
                <div class="w-full h-full bg-center bg-no-repeat bg-contain " :style="`background-image:url(${item})`">
                </div>
            </div>
        </RouterLink>
        <RouterLink :to="{
            name: 'circle-category',
            params: { id: 0 }
        }">
            <div class="flex  items-center justify-between p-3 bg-[#fef7ed] rounded-lg">
                <div class="">
                    <div class="text-sm font-bold shrink-0">
                        更多
                    </div>
                    <div class="text-gray-500 shrink-0">
                        快来加入
                    </div>
                </div>
                <div>
                    <IIcon-park-solid:right-c class="text-[#f2c575] text-lg" />
                </div>
            </div>
        </RouterLink>
    </div>
</template>
    
<script setup lang='ts'>
import cat1 from '~/assets/circle/cat1.png'
import cat2 from '~/assets/circle/cat2.png'
import cat3 from '~/assets/circle/cat3.png'
import cat4 from '~/assets/circle/cat4.png'
</script>
    
<style></style>